<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_浮动模式</title>
  <style>
    .fu{background-color: #ff0;
      width: 500px;
      /*当所有子元素都浮动走以后，父元素会高度坍塌
      可以设置BFC结界保护：父元素会根据子元素浮动后的实际高度自动填充高度
       */
    overflow: hidden}
    .fu>div{width:100px;height: 100px;}
    .z1{background-color: #f00;
    float: left/*子元素浮动后会释放布局控件，且不再支撑父元素的高度*/}
    .z2{background-color: #0f0;
      float: left;}
    .z3{background-color: #00f;
    float: left}
  </style>
</head>

<body>
<div class="fu">
  <div class="z1"></div>
  <div class="z2"></div>
  <div class="z3"></div>
</div>
</body>
</html>